<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>3DBanner</title>
  <style type="text/css">
		*{
				margin: 0;
				padding: 0;
		}
		#banner{
				width: 800px;
				height: 360px;
				margin: 100px auto;
				border: 1px solid #000;
		}
		#pic{
				width: 800px;
				height: 360px;
				perspective: 2500px;/*景深*/
		}
		#pic ul li {
				position:relative;
				float: left;
				width: 200px;
				height: 360px;
				list-style: none;
				transform-style: preserve-3d;/*构建3D场景*/
				transition: 0.5s;/*过度所用的时间*/
		}
		#pic ul li div{
				position: absolute;
				left: 0;
				bottom: 0;
				width: 200px;
				height: 360px;
				border: 1px solid red;
		}
		#pic ul li div:nth-child(1){
				top: -360px;
				transform-origin: bottom; /*旋转轴心*/
				transform:translateZ(180px) rotateX(90deg);/*旋转角度*/
		}
		#pic ul li div:nth-child(2){
				top: 360px;
				transform-origin: top; /*旋转轴心*/
				transform:translateZ(180px) rotateX(-90deg);/*旋转角度*/
		}
		#pic ul li div:nth-child(3){
				/* transform: */
				transform:translateZ(180px);
		}
		#pic ul li div:nth-child(4){
				transform: translateZ(-180px);
		}
		#pic ul li:hover{
				transform: rotateX(180deg)
		}

		.block{
				width: 300px;
				height: 50px;
				backgroud-color: red;
		}
  </style>
 </head>
 <body>
		<div id="banner">
			<div id="pic">
					<ul>
						<li>
							<div>上</div>
							<div>下</div>
							<div>前</div>
							<div>后</div>
						</li>
						<li>
							<div>上</div>
							<div>下</div>
							<div>前</div>
							<div>后</div>
						</li>
						<li>
							<div>上</div>
							<div>下</div>
							<div>前</div>
							<div>后</div>
						</li>
						<li>
							<div>上</div>
							<div>下</div>
							<div>前</div>
							<div>后</div>
						</li>
					</ul>	
			</div>
		</div>
		<div class = "block"></div>
 </body>
</html>
<script>
		
</script>
